<!-- 子组件 ChildComponent -->
<script setup lang="ts">
import Top1 from '../components/Top1.vue';
import GoodsList from '../components/GoodsList.vue';
import { ref } from 'vue';

interface GoodsList { 
  id: number;
  name: string;
  link: string;
}

const goodsList = ref([
  { id: 1, name: '女装', link: '#women' },
  { id: 2, name: '男装', link: '#man' },
  { id: 3, name: '手机', link: '#phone' },
  { id: 4, name: '电脑', link: '#computer' },
  { id: 5, name: '运动', link: '#sport' }
]);
function updateMenu(){
goodsList.value = [
  { id: 1, name: '热销商品', link: '#home' },
  { id: 2, name: '新品上市', link: '#new-arrivals' },
  { id: 3, name: '特价商品', link: '#sales' },
  { id: 4, name: '二手市场', link: '#toos' },
  { id: 5, name: '商品回收', link: '#toos' }
];
}

</script>


<!-- 父组件 -->
<template>
  <Top1></Top1>
  <GoodsList :goodsList="goodsList" ></GoodsList>
   <button @click="updateMenu">更新菜单</button>
</template>
<style>
button{
padding:5px;
margin:30px 0 0 100px;
}</style>